<template>
  <div class="register_body">
    <!-- 注册主体 -->
    <div class="register">
      <input
        type="button"
        value="返回"
        style="
          position: fixed;
          top: 10px;
          left: 10px;
          width: 35px;
          height: 25px;
          background-color: #c3e1f9;
        "
      />
      <form action="">
        <h1>注册</h1>
        <!-- 用户名 -->
        <div class="register_table table1">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-zhucedengluyonghuming"></use>
          </svg>
          <input type="tel" name="" id="" placeholder="请输入用户名" />
          <span>提示：请输入长度不超过20的用户名</span>
        </div>
        <!-- 手机号 -->
        <div class="register_table table2">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-shouji"></use>
          </svg>
          <input type="tel" name="" id="" placeholder="请输入手机号" />
          <span>提示：请输入正确的手机号</span>
        </div>
        <!-- 验证码 -->
        <div class="register_table table3">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-duanxin"></use>
          </svg>
          <input
            type="tel"
            name=""
            id=""
            placeholder="请输入验证码"
            style="width: 62%; float: left"
          />
          <input
            type="button"
            value="获取验证码"
            style="
              width: 17%;
              float: left;
              font-size: 10px;
              background-color: #c3e1f9;
            "
          />
          <span style="margin-left:17%">提示：请输入四位数字验证码</span>
        </div>
        <div class="register_table table4">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-mima"></use>
          </svg>
          <input
            type="password"
            name=""
            id=""
            placeholder="请输入不小于8位数字的密码"
          />
          <span>提示：请输入大于8位并且小于16位字母数字组合的密码</span>
        </div>
        <div class="register_table table5">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-mima"></use>
          </svg>
          <input type="password" name="" id="" placeholder="请再次输入密码" />
          <span>提示：请输入和上面相同的密码</span>
        </div>
        <button type="submit">注册</button>
      </form>
      <div class="register_tip">
        <input type="checkbox" name="" id="" /><span
          >我已阅读并同意《XXX》、《XXX》</span
        >
      </div>
    </div>
    <!-- 熊的动图 -->
    <div class="bottom">
      <div class="bottom_bg1"></div>
      <div class="bottom_bg2"></div>
      <div style="height: 200px"></div>
      <div class="bottom_bear"></div>
    </div>
  </div>
</template>

<script scoped>
export default {
  name: "Register",
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.icon {
  width: 14%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.left {
  float: left;
}

/* .body {
  background-color: rgba(66, 66, 66, 0.4);
} */

.register_body {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(66, 66, 66, 0.4); */
}

.register {
  position: absolute;
  top: 11%;
  left: 30%;
  /* transform: translateX(94%); */
  width: 40%;
  height: 80%;
  margin: auto auto;
  text-align: center;
  padding: 0.5%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #66afe9;
  z-index: 999;
}

.register form {
  position: fixed;
  width: 40%;
  height: 80%;
}

.register h1 {
  margin-top: 1%;
  margin-bottom: 3%;
  font-size: 28px;
}

.register .register_table {
  width: 90%;
  height: 6%;
  line-height: 40px;
  margin-left: 5.5%;
  margin-bottom: 8%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #b5d9f7;
  border-radius: 4px;
  /* background-color: aqua; */
}

.register .register_table input {
  width: 76%;
  height: 95%;
  text-align: center;
  font-size: 1.2em;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #6a6f77;
  background-color: transparent;
  -web-kit-appearance: none;
  -moz-appearance: none;
  display: block;
  padding: 0 1em;
  text-decoration: none;
  outline: 0;
}
.register .register_table span {
  font-size: 6px;
  color: #898a8b;
}

input:focus {
  border-color: #66afe9 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.register button {
  position: relative;
  /* top: 68%; */
  width: 90%;
  height: 6%;
  font-size: 1.3em;
  line-height: 1.3em;
  /* margin-bottom: 7%; */
  background-color: #c3e1f9;
  border: 1px solid #b5d9f7;
}

.register .register_tip {
  position: absolute;
  bottom: 3%;
  left: 35%;
}

.bottom {
  position: absolute;
  bottom: -8.5%;
  width: 100%;
  height: 55%;
}
.bottom .bottom_bg1 {
  float: left;
  width: 100%;
  height: 90%;
  background: url(@/assets/login/bg1.png) no-repeat;
}
.bottom .bottom_bg2 {
  float: left;
  position: relative;
  left: 0;
  bottom: 160%;
  width: 100%;
  height: 140%;
  background: url(@/assets/login/bg2.png) no-repeat;
  opacity: 0.3;
}
.bottom .bottom_bear {
  position: relative;
  width: 200px;
  height: 100px;
  background: url(@/assets/login/bear.png) no-repeat;
  /* 我们元素可以添加多个动画， 用逗号分隔 */
  animation: bear 0.4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1600px 0;
  }
}
@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
    /* margin-left: -100px; */
    transform: translateX(-50%);
  }
}
</style>